<template>
  <div class="charts-view">
    <div class="page-header">
      <h1>数据图表</h1>
      <div class="header-actions">
        <el-select v-model="chartType" placeholder="选择图表类型" style="width: 150px">
          <el-option label="折线图" value="line" />
          <el-option label="柱状图" value="bar" />
          <el-option label="饼图" value="pie" />
          <el-option label="散点图" value="scatter" />
        </el-select>
        <el-button type="primary" @click="refreshChart">
          <el-icon><Refresh /></el-icon> 刷新
        </el-button>
      </div>
    </div>

    <!-- 图表控制面板 -->
    <el-card class="control-panel">
      <el-form :inline="true" :model="chartOptions" class="chart-form">
        <el-form-item label="数据集">
          <el-select v-model="chartOptions.dataset" placeholder="选择数据集">
            <el-option label="销售数据" value="sales" />
            <el-option label="用户数据" value="users" />
            <el-option label="产品数据" value="products" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-select v-model="chartOptions.timeRange" placeholder="选择时间范围">
            <el-option label="最近7天" value="7d" />
            <el-option label="最近30天" value="30d" />
            <el-option label="最近90天" value="90d" />
            <el-option label="最近1年" value="1y" />
          </el-select>
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="chartOptions.groupBy" placeholder="选择分组方式">
            <el-option label="日期" value="date" />
            <el-option label="类别" value="category" />
            <el-option label="区域" value="region" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="applyOptions">应用</el-button>
          <el-button @click="resetOptions">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表展示区域 -->
    <el-card class="chart-card">
      <div class="chart-container" ref="chartRef"></div>
    </el-card>

    <!-- 图表数据表格 -->
    <el-card class="data-table-card">
      <template #header>
        <div class="card-header">
          <span>图表数据</span>
          <el-button type="primary" link @click="exportData">
            <el-icon><Download /></el-icon> 导出数据
          </el-button>
        </div>
      </template>
      <el-table :data="chartData" style="width: 100%" border stripe height="300">
        <el-table-column v-for="(col, index) in tableColumns" :key="index" 
          :prop="col.prop" :label="col.label" :width="col.width" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import { 
  Refresh, 
  Download 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 图表类型
const chartType = ref('line')

// 图表选项
const chartOptions = reactive({
  dataset: 'sales',
  timeRange: '30d',
  groupBy: 'date'
})

// 图表引用
const chartRef = ref<HTMLElement>()

// 图表实例
let chart: echarts.ECharts | null = null

// 表格列
const tableColumns = ref([
  { prop: 'date', label: '日期', width: '120' },
  { prop: 'category', label: '类别', width: '120' },
  { prop: 'value', label: '数值', width: '100' },
  { prop: 'growth', label: '增长率', width: '100' }
])

// 图表数据
const chartData = ref([
  { date: '2023-06-01', category: '类别A', value: 1200, growth: '12%' },
  { date: '2023-06-02', category: '类别A', value: 1300, growth: '8%' },
  { date: '2023-06-03', category: '类别A', value: 1100, growth: '-15%' },
  { date: '2023-06-04', category: '类别A', value: 1400, growth: '27%' },
  { date: '2023-06-05', category: '类别A', value: 1500, growth: '7%' },
  { date: '2023-06-01', category: '类别B', value: 900, growth: '5%' },
  { date: '2023-06-02', category: '类别B', value: 950, growth: '5%' },
  { date: '2023-06-03', category: '类别B', value: 980, growth: '3%' },
  { date: '2023-06-04', category: '类别B', value: 1000, growth: '2%' },
  { date: '2023-06-05', category: '类别B', value: 1050, growth: '5%' }
])

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  chart = echarts.init(chartRef.value)
  updateChart()
}

// 更新图表
const updateChart = () => {
  if (!chart) return
  
  let option: any = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['类别A', '类别B']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2023-06-01', '2023-06-02', '2023-06-03', '2023-06-04', '2023-06-05']
    },
    yAxis: {
      type: 'value'
    }
  }
  
  // 根据图表类型设置不同的配置
  switch (chartType.value) {
    case 'line':
      option.series = [
        {
          name: '类别A',
          type: 'line',
          data: [1200, 1300, 1100, 1400, 1500],
          smooth: true
        },
        {
          name: '类别B',
          type: 'line',
          data: [900, 950, 980, 1000, 1050],
          smooth: true
        }
      ]
      break
      
    case 'bar':
      option.series = [
        {
          name: '类别A',
          type: 'bar',
          data: [1200, 1300, 1100, 1400, 1500]
        },
        {
          name: '类别B',
          type: 'bar',
          data: [900, 950, 980, 1000, 1050]
        }
      ]
      break
      
    case 'pie':
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '数据分布',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 6500, name: '类别A' },
              { value: 4880, name: '类别B' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      break
      
    case 'scatter':
      option.series = [
        {
          name: '类别A',
          type: 'scatter',
          data: [[0, 1200], [1, 1300], [2, 1100], [3, 1400], [4, 1500]]
        },
        {
          name: '类别B',
          type: 'scatter',
          data: [[0, 900], [1, 950], [2, 980], [3, 1000], [4, 1050]]
        }
      ]
      break
  }
  
  chart.setOption(option, true)
}

// 刷新图表
const refreshChart = () => {
  updateChart()
  ElMessage.success('图表已刷新')
}

// 应用选项
const applyOptions = () => {
  updateChart()
  ElMessage.success('已应用新选项')
}

// 重置选项
const resetOptions = () => {
  chartOptions.dataset = 'sales'
  chartOptions.timeRange = '30d'
  chartOptions.groupBy = 'date'
  updateChart()
  ElMessage.info('已重置选项')
}

// 导出数据
const exportData = () => {
  ElMessage.success('数据已导出')
}

// 监听图表类型变化
watch(chartType, () => {
  updateChart()
})

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize()
}

onMounted(() => {
  // 初始化图表
  initChart()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  chart?.dispose()
})
</script>

<style scoped>
.charts-view {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.control-panel {
  margin-bottom: 20px;
}

.chart-form {
  display: flex;
  flex-wrap: wrap;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 500px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-table-card {
  margin-bottom: 20px;
}
</style> 